<template>
  <div style="width: 100%; height: 100%">
    <div style="height: 5%; width: 90%; margin: 10px 0px 0 10px">
      <div style="float: left">
        <img slot="item-icon" src="@/assets/img/little_icon/szyd.png" />&nbsp;
      </div>
      <span style="font-size: 20px">三重一大决策表</span>
    </div>
    <el-divider></el-divider>
    <div style="height: 90%">
      <div>
        <span>总计&nbsp; <span style="color:#0489B1">{{ fromData.totle }}件</span></span
        ><br />
        <div style="width: 100%">
          <table border="0" style="width: 100%; text-align: center">
            <tr>
              <td>重大决策</td>
              <td>重要人事任免</td>
            </tr>
            <tr>
              <td style="color:#0489B1"> {{ fromData.totle }}件</td>
              <td style="color:#0489B1">{{ fromData.totle }}件</td>
            </tr>
            <tr>
              <td>重大项目安排</td>
              <td>大额资金运作</td>
            </tr>
            <tr>
              <td style="color:#0489B1"> {{ fromData.totle }}件</td>
              <td style="color:#0489B1">{{ fromData.totle }}件</td>
            </tr>
          </table>
        </div>
      </div>
      <div id="31" :style="{ width: '400px', height: '200px' }"></div>
      <div id="ZXT" :style="{ width: '430px', height: '300px' }"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DecReport",
  data() {
    return {
      fromData: {
        totle: 0,
        percentage: "+0.22%",
      },
    };
  },
  mounted() {
    this.drawCricle();
    this.drawZX();
  },
  methods: {
    // 饼图图表
    drawCricle() {
      let myChart1 = this.$echarts.init(document.getElementById("31"));
      var option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "15%",
          right: "right",
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "其他发文" },
              { value: 735, name: "工会发文" },
              { value: 580, name: "行政发文" },
              { value: 484, name: "集团发文" },
            ],
          },
        ],
      };
      option && myChart1.setOption(option);
    },
    // 折线图
    drawZX() {
      let myChart1 = this.$echarts.init(document.getElementById("ZXT"));
      var option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ['大额资金运转', '重大项目安排', '重要人事任免', '重大决策', '总计']
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          top: "6%",
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2016", "2017", "2018", "2019", "2020"],
        },
        yAxis: {
          show:true
        },
        series: [
          {
            name: "大额资金运转",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "重大项目安排",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "重要人事任免",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "总计",
            type: "line",
            stack: "总量",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "重大决策",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
          },
        ],
      };
      option && myChart1.setOption(option);
    },
  },
};
</script>

<style>
.el-divider--horizontal {
  margin: 10px 0px;
}
</style>